
.classify{
    width: 100%;
    height: 100vh;
    position: relative;
    padding-top:v(144);
    box-sizing: border-box;
    background-color: #F4F6FA;
    &-head{
        width: 100%;
        height: v(120);
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 v(32) 0 v(48);
        box-sizing: border-box;
        .head-back{
            width: v(76);
            height: v(76);
        }
        .head-searchInput{
            width: v(816);
            height: v(80);
            background: #FFFCF5;
            border-radius: v(44);
            border: v(2) solid #FFE2C5;
            overflow: hidden;
            position: absolute;
            top: v(20);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            input{
                width: v(700);
                height: 100%;
                border: none;
                outline: none;
                appearance: none;
                text-indent: v(52);
                font-size: v(30);
                background-color: transparent;
            }
            input::placeholder{
                color: #858689;
            }
            img{
                width: v(40);
                height: v(40);
                margin-right: v(44);
            }
        }
        .head-button{
            width: v(184);
            height: v(80);
        }
    }
    &-container{
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        .classify-nav{
            width:v(200);
            min-width: v(200);
            height: 100%;
            overflow-y: auto;
            &-item{
                width: 100%;
                background-color: #fff;
                border-radius: 0 v(24) v(24) 0;
                margin-bottom: v(16);
                .nav-item-title{
                    display: flex;
                    align-items: center;
                    height: v(80);
                    img{
                        width: v(44);
                        height: v(44);
                        margin: 0 v(8) 0 v(20);
                    }
                    span{
                        font-size: v(26);
                        color: #794D15;
                    }
                }
                .nav-item-c{
                    font-size: v(26);
                    text-align: center;
                    line-height:v(80);
                    color: #000000;
                    position: relative;
                }
                .nav-item-c.active::before{
                    position: absolute;
                    display: block;
                    content: '';
                    top: v(19);
                    left: v(20);
                    width: v(16);
                    height: v(42);
                    background: #FF8200;
                    box-shadow: inset 0px v(4) v(6) 0px rgba(255,255,255,0.68), inset -1px 1px 2px 0px rgba(255,255,255,0.72);
                    border-radius: v(10);
                    animation: sclcaSize 0.3s linear;
                }
            }
        }
        .classify-list{
            width: calc(100% - v(232));
            height: 100%;
            margin-left: v(32);
            overflow-y: auto;
            .classify-list-item{
                display: inline-block;
                width: v(320);
                height: v(232);
                margin: 0 v(28) v(24) 0;
                .list-item-pic{
                    width: 100%;
                    height: v(180);
                    border-radius: v(24);
                    background-color: #d8d8d8;
                    overflow: hidden;
                }
                .list-item-title{
                    font-size: v(28);
                    color: #000000;
                    line-height: v(40);
                    margin-top: v(12);
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
    .search-contianer{
        width: 100%;
        height: 100%;
        padding-left: v(60);
        box-sizing: border-box;
        overflow-y: auto;
        .search-result{
            width: 100%;
            .search-title{
                width: 100%;
                font-size: v(30);
                color: #5A6273;
                line-height: v(42);
                margin-bottom: v(30);
            }
            .search-list{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                &-item{
                    width:v(360);
                    height: v(256);
                    margin: 0 v(40) v(24) 0;
                    .search-pic{
                        width: v(360);
                        height: v(202);
                        border-radius: v(32);
                        overflow: hidden;
                        background-color: #fff;
                    }
                    .search-course-title{
                        font-size: v(30);
                        color: #000000;
                        line-height: v(42);
                        margin-top: v(12);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
        .search-result-null{
            width: v(432);
            margin: 0 auto v(26);
            .result-null-pic{
                width: v(432);
                height: v(365);
            }
            .result-null-text{
                p{
                    font-size: v(24);
                    color: #5A6273;
                    line-height: v(33);
                    text-align: center;
                }
                .tip{
                    font-size: v(30);
                    color: #000000;
                    line-height: v(42);
                    margin-bottom: v(4);
                }
            }
        }
        .recommend{
            width: 100%;
            margin: v(6) 0 v(40);
            .recommend-title{
                width: v(164);
                height: v(56);
                background: #676EFF;
                border-radius: v(16);
                font-size: v(28);
                color: #FFFFFF;
                line-height: v(56);
                text-align: center;
            }
            .recommend-list{
                margin-top: v(38);
                width: 100%;
                white-space: nowrap;
                overflow-x: auto;
                .recommend-item{
                    width:v(360);
                    height: v(256);
                    margin: 0 v(40) 0 0;
                    display: inline-block;
                    vertical-align: top;
                    .recommend-item-pic{
                        width: v(360);
                        height: v(202);
                        border-radius: v(32);
                        overflow: hidden;
                        background-color: #fff;
                    }
                    .recommend-item-title{
                        font-size: v(30);
                        color: #000000;
                        line-height: v(42);
                        margin-top: v(12);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                
            }
        }
    }
}
@keyframes sclcaSize {
    0%{transform: scaleY(0);transform-origin: center,center;}
    100%{transform: scaleY(1);}
}